<template>
  <div class="search">
    <nav-top @callback="callback"></nav-top>
    <div class="search_main">
      <div class="search_tit">
        <span>
          <img
            @click="inputSearch"
            class="search_ico"
            src="../../../assets/images/icon/icon_sousuo.png"
            alt
          />
          <input
            class="search_input bsb"
            type="text"
            v-model="search"
            placeholder="输入订单号、用户帐号、手机号搜索"
          />
        </span>
        <span class="cencel" @click="cencel">取消</span>
      </div>
      <div v-if="canfind" class="search_box">
        <p class="tit">已为您找到如下结果</p>
        <div class="main_list">
          <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="5"
          >
            <li @click="todetail(item)" v-for="item in list" :key="item" class="flex">
              <div class="top">
                <span class="label">{{item.label}}</span>
                <span
                  class="status"
                >{{item.status=='1'?'未结算':item.status=='2'?"已支付":item.status=='3'?'已退款':''}}</span>
                <span class="recording">
                  <span v-if="item.status!='3'&&item.recording">+</span>
                  {{item.recording}}
                </span>
              </div>
              <div class="bottom">
                <span class="date">{{item.date}}</span>
                <span class="phone">{{item.phone}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-else>
        <div v-if="!isSearch" class="cannot">未找到相关结果</div>
        <div v-else class="cannot"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";

  export default {
    name: "search",
    computed: {
      ...mapGetters(["proxy_id", "proxy_type"])
    },
    data() {
      return {
        search: "",
        value: "",
        tempArr: [],
        list: [],
        curr: 1,
        limits: 10,
        loading: true,
        more: false,
        canfind: false,
        isSearch: true
      };
    },
    created() {},
    methods: {
      callback(icon) {
        if (icon == "back") {
          this.$router.go(-1);
        }
      },
      todetail(item) {
        // console.log(item);
        this.$router.push({
          name: "detail",
          query: { id: item.id }
        });
      },
      inputSearch() {
        if (!this.search) {
          this.canfind = false;
          this.isSearch = false;
          return;
        }
        this.curr = 1;
        this.tempArr = [];
        this.getOrderList(this.curr, this.limits, this.proxy_id, this.search);
      },
      cencel() {
        this.$router.go(-1);
      },
      loadMore() {
        if (this.list.length > 5 && this.more) {
          this.curr += 1;
          this.getOrderList(this.curr, this.limits, this.proxy_id, this.search);
          // console.log("jiazai");
        }
      },
      getOrderList(curr, limits, proxy_id, name) {
        this.Http.orderList({
          curr,
          limits,
          proxy_id,
          name
        })
          .then(r => {
            this.loading = true;
            // console.log(r);
            this.canfind = true;
            r.list.map((item, index) => {
              let time = item.create_time.split(" ")[1];
              let date =
                new Date(item.create_time).getMonth() +
                1 +
                "月" +
                new Date(item.create_time).getDate() +
                "日";
              this.tempArr.push({
                label: item.pname,
                status: item.status,
                recording: item.real_pay,
                date: date + " " + time,
                phone: item.phone,
                id: item.id
              });
            });
            this.loading = false;

            this.list.splice(0, this.list.length, ...this.tempArr);
            // console.log(this.list);
            if (this.list.length > 5) {
              this.more = true;
            } else if (this.list.length == 0) {
              // this.list.push({ label: "未找到相关结果" });
              this.canfind = false;
              this.isSearch = false;
            }
          })
          .catch(e => console.log(e));
      }
    }
  };
</script>
<style lang="less" scoped>
  .search {
    background: rgba(247, 248, 250, 1);
    height: 100vh;
    .search_main {
      padding: 0 36px;
    }
    .search_tit {
      height: 84px;
      position: relative;
      .search_ico {
        position: absolute;
        left: 48px;
        top: 50%;
        transform: translateY(-50%);
        width: 33px;
        height: 33px;
      }
      .search_input {
        width: 580px;
        background: linear-gradient(
          90deg,
          rgba(240, 242, 245, 1) 0%,
          rgba(240, 242, 245, 1) 100%
        );
        line-height: 84px;
        // z-index: 100px;
        border-radius: 42px;
        font-size: 28px;
        padding-left: 100px;
        padding-right: 20px;
        &::placeholder {
          color: rgba(153, 153, 153, 1);
        }
      }
      .cencel {
        float: right;
        margin-left: 26px;
        line-height: 84px;
        font-size: 32px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }
    .search_box {
      margin-top: 40px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 100%
      );
      box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      .tit {
        padding: 34px 0 34px 28px;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 48px;
      }
      .main_list {
        overflow: scroll;
        min-height: 149px;
        max-height: 945px;

        .flex {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          border-bottom: 1px solid rgba(232, 232, 232, 1);
          &:last-child {
            border: none;
          }
          .top,
          .bottom {
            display: flex;
            justify-content: space-between;
            // padding: 0 28px;
          }
          .top {
            padding: 34px 28px 26px;
            .label {
              // height: 34px;
              flex: 3;
              font-size: 36px;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
              line-height: 48px;
            }
            .status {
              // height: 23px;
              flex: 1;
              font-size: 24px;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
            }
            .recording {
              flex: 1.2;
              // height: 27px;
              font-size: 36px;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
              line-height: 48px;
            }
          }
          .bottom {
            padding: 0 28px 33px;
            .date {
              // height: 22px;
              font-size: 24px;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
            }
            .phone {
              // height: 18px;
              font-size: 24px;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
            }
          }
        }
      }
    }
    .cannot {
      margin: 266px 200px;
      min-width: 300px;
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 48px;
    }
  }
</style>